<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @close="dialogClose"
      @open="dialogOpen"
    >
      <!-- 表单区域 -->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
        <el-form-item label="区域名称" prop="regionName" size="medium">
          <el-input v-model="ruleForm.regionName" placeholder="请输入" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark" size="medium">
          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注(不超过40字)" maxlength="40" show-word-limit />
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { Addarea, reworked } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    code: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: { // 表单数据
        regionName: '',
        remark: ''
      },
      rules: { // 校验规则
        regionName: [{ required: true, message: '请输入' }],
        remark: [{ required: true, message: '请输入' }]
      }
    }
  },
  computed: {
    title() {
      return this.ruleForm.id ? '修改' : '新增'
    }
  },
  methods: {
    // 打开弹窗
    dialogOpen() {
      this.ruleForm = this.code
      this.ruleForm.regionName = this.code.name
    },
    // 关闭弹窗
    dialogClose() {
      this.$emit('close')
      this.$refs.ruleForm.resetFields()
    },
    // 点击提交
    submit() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        if (this.ruleForm.id) { // 修改
          await reworked(this.ruleForm)
        } else { // 新增
          await Addarea(this.ruleForm)
        }
        this.$message.success(this.title + '成功')
        this.dialogClose()
        this.$emit('newAdd')
      })
    }
  }
}
</script>

<style>

</style>
